<script setup>
//导入axios的实例
import axiosApi from '@/http/index.js'
import {ref,onBeforeMount} from "vue";
//定义变量接收网络请求得到的数据
const users = ref([])//默认是数组
//定义函数
const  getData = ()=>{
  //发送请求
  axiosApi.get('https://jsonplaceholder.typicode.com/users')
      .then(resp=>{  //执行成功要执行的回调
        console.log('返回的结果：',resp)
        //console.log('获取需要展示的数据:',resp)
        //赋值
       users.value = resp
      })
      .catch(error=>{//执行失败要进行的回调
        console.log('执行出错:',error)
      })
}
//生命周期钩子函数，目的是为了在页面加载时，渲染获取到的数据
onBeforeMount(()=>{
  //调用获取远程数据的函数
  getData()
})
</script>

<template>
      <div>
        <div><button @click="getData">获取远程数据</button></div>
      </div>
    <table width="100%" border="1">
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>用户名</td>
        <td>地址</td>
      </tr>
      <tr v-for="user in users">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.address}}</td>
      </tr>
    </table>
</template>

<style scoped>

</style>